<template>
  <div>
    <van-nav-bar fixed placeholder safe-area-inset-top title="杨婷的备忘录" @click-left="back" @click-right="showAdd = true">
      <template #left>
        <van-icon name="arrow-left" size="18px" color="#333" />
      </template>
      <template #right>
        <van-icon name="add-o" size="18px" color="#333" />
      </template>
    </van-nav-bar>
    <van-search v-model="keyword" placeholder="请输入搜索关键词" @blur="goSearch(1)" />
    <div v-if="memorandumList.length !== 0">
      <div v-for="(item, index) in memorandumList" :key="index">
        <van-swipe-cell>
          <div class="memorandumList">
            <div>
              <img src="@/assets/role01.png" alt="" width="40" />
            </div>
            <div>
              {{ item.content }}
            </div>
            <div>
              {{ item.time }}
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="goRomove(item.id)" style="height: 100%;"/>
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <div v-else class="noData">暂无更多备注</div>
    <van-dialog v-model="showAdd" title="添加备忘录" show-cancel-button @confirm="goAdd">
      <van-field v-model="text" placeholder="请填写备忘录" rows="2" autosize type="textarea" maxlength="50" show-word-limit/>
    </van-dialog>
  </div>
</template>

<script>
import { getTime } from "@/utils/publicMethods";
import {
  queryIndexDBByPage, queryIndexDBVagueByPage,duplicateRemoval
} from "@/utils/util.js"

export default {
  data() {
    return {
      text: '',
      showAdd: false,
      keyword: '',
      memorandumList: [],
      db: '',
      idb: '',
      page: 1,
      searchPage: 1
    }
  },
  created() {
    const _this = this
    _this.$store.dispatch('tools/setDb').then(res => {
      _this.db = res
      this.getList()
    })
    _this.$store.dispatch('tools/setIdb').then(res => {
      _this.idb = res
    })
  },
  mounted() {
    window.addEventListener('scroll', this.showScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.showScroll)
  },
  methods: {
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20) {
        if (this.keyword) {
          this.searchPage++
          this.goSearch()
        } else {
          this.page++
          this.getList()
        }
      }
    },
    goSearch(type) {
      const _this = this
      if(!_this.keyword){
        _this.memorandumList=[]
        _this.page=1
        _this.getList()
        return
      }
      if(type==1) _this.searchPage=1
      queryIndexDBVagueByPage({
        page: _this.searchPage,
        pageSize: 10,
        db: _this.db,
        tableName: 'memorandum',
        queryKey: 'content',
        key: _this.keyword
      }).then(res => {
        _this.memorandumList = type==1 ? res : _this.memorandumList.concat(res)
        duplicateRemoval(_this.memorandumList,'id')
      })
    },
    goRomove(id) {
      const _this = this
      _this.idb.delete({
        tableName: "memorandum",
        condition: (item) => item.id == id,
        success: () => {
          _this.$toast('该备注删除成功')
          _this.memorandumList.forEach((e, i) => {
            if (e.id == id) {
              _this.memorandumList.splice(i, 1)
            }
          });
        }
      })
    },
    getList() {
      const _this = this
      queryIndexDBByPage({
        page: _this.page,
        pageSize: 10,
        db: _this.db,
        tableName: 'memorandum',
        queryIndex: 'name',
        queryIndexValue: 'yt'
      }).then(res => {
        _this.memorandumList = _this.memorandumList.concat(res)
        duplicateRemoval(_this.memorandumList,'id')
      })
    },
    goAdd() {
      const _this = this
      _this.idb.insert({
        tableName: "memorandum",
        data: {
          time: getTime(),
          content: _this.text,
          name: 'yt'
        },
        success: () => {
          _this.$toast('添加备注成功')
          _this.showAdd = false
          _this.memorandumList.unshift({
            time: getTime(),
            content: _this.text,
            name: 'yt'
          })
          _this.text = ''
        },
      });
    },
    back() {
      this.$router.go(-1)
    }
  },
}
</script>

<style lang="less" scoped>
.memorandumList {
  padding: 8px;
  margin: 10px 0 0 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &>div:nth-child(2) {
    max-width: 52vw;
  }
  &>div:nth-child(3) {
    font-size: 14px;
    color: #d14;
  }
}

.noData {
  margin: 15px 0 0 15px;
  font-size: 15px;
  color: #ddd;
}
</style>